<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:replace="fragments/custom_base::commonHead"></th:block>
</head>
<body>
<div style="padding: 16px;">
  <div class="layui-card">
    <th:block th:replace="fragments/custom_table::commonTitle"></th:block>
    <div class="layui-card-body">
      <table class="layui-hide" id="StaticTable" lay-filter="StaticTable"></table>
    </div>
  </div>
</div>
<script type="text/html" id="StaticTableToolBar">
  <div class="layui-btn-container">

  </div>
  <div class="layui-row" style="margin-top: 10px">
    <form class="layui-form layui-row layui-col-space16">

      <div class=" layui-col-sm1">
        <div class="layui-input-wrap">
          <select name="type">
            <option value="">全部</option>
          </select>
        </div>
      </div>

      <div class=" layui-col-sm2">
        <div class="layui-input-wrap" >
          <input type="text" class="layui-input" id="dateRangeStart" name="startDate" placeholder="开始日期" readonly />
        </div>
      </div>
      <div class="layui-col-sm2">
        <div class="layui-input-wrap">
          <input type="text" class="layui-input" id="dateRangeEnd" name="endDate" placeholder="结束日期" readonly />
        </div>
      </div>

      <div class="layui-btn-container layui-col-sm3">
        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="StaticTableSearch">检索</button>
        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
      </div>
    </form>
  </div>
</script>

<script th:inline="javascript">
  $(function () {
    //声明配置初始化表格
    let initConfig = {
      //请求路径
      "tableName":"StaticTable",
      //此处工具栏要配置名称正确，否则不会显示
      "toolBarName":"StaticTableToolBar",
      "tableUrl":"/admin/statics/all_data",
      "StaticTableSearchName":"StaticTableSearch",
      //设置表头
      "tableCols":[
        [
          {"field":"id","fixed":"left","width":80,"title":"ID","sort":true},
          {"field":"typeText","width":200,"title":"统计类型"},
          {"field":"name","width":200,"title":"统计说明"},
          {"field":"value","title":"数据情况","width":280},
          {"field":"unitText","title":"单位","width":80},
          {"field":"createdAt","width":380,"title":"统计开始时间","sort":true},
          {"field":"updatedAt","width":380,"title":"最后更新时间","sort":true},
        ]
      ],
      "menuDesc": /*[[${menu_desc}]]*/ ""
    };
    //初始化表单信息
    layui.use(["table", "dropdown", "form"], function () {
      // ...原有的代码...
      let table = layui.table;
      let form = layui.form;
      let tableUrl = initConfig.tableUrl;//数据路径
      let tableCols= initConfig.tableCols;//每页表头
      let menuDesc= initConfig.menuDesc;//每页描述
      let tableName = initConfig.tableName;//表格名 每页都不用
      let toolBarName = initConfig.toolBarName;//滚动条名 每页都不同
      let StaticTableSearchName = initConfig.StaticTableSearchName;//搜索表单名 每页都不同
      initializeSearchFrom();
      //搜索demo
      form.on('submit('+StaticTableSearchName+')', function(data){
        let formData = data.field;
        table.reloadData(tableName, {
          where: formData,
        });
        return false; // 阻止默认 form 跳转
      });
      // 创建渲染实例
      table.render({
        elem: "#"+tableName,
        url: tableUrl, //此处填写后端分页接口
        toolbar: "#"+toolBarName,
        defaultToolbar: [{
          layEvent: 'refresh',
          icon: 'layui-icon-refresh',
          title: '刷新'
        },"filter", "exports", "print", {
          title: "本页描述",
          layEvent: "LAYTABLE_TIPS",
          icon: "layui-icon-tips"
        }],
        height: "full-35", // 最大高度减去其他容器已占有的高度差
        page: {
          limit: 20 // 每页显示20条数据
        },
        css: [ // 重设当前表格样式
          ".layui-table-tool-temp{padding-right: 145px;}"
        ].join(""),
        cellMinWidth: 80,
        totalRow: false, // 开启合计行
        cols: tableCols
      });

      // 工具栏事件
      table.on("toolbar("+tableName+")", function (obj) {
        switch (obj.event) {
          case "refresh":
            table.reload(tableName, {
              where: {},
            });
            initializeSearchFrom();
            break;
          case "LAYTABLE_TIPS":
            layer.alert(menuDesc);
            break;
        };
      });
    });
  })
  function initializeSearchFrom() {
    layui.use(["laydate","form"], function () {
      let form = layui.form;
      // 初始化开始日期选择器
      let laydate = layui.laydate;
      laydate.render({
        elem: '#dateRangeStart',
        format: 'yyyy-MM-dd',
        min: '2000-01-01'
      });
      // 初始化结束日期选择器
      laydate.render({
        elem: '#dateRangeEnd',
        format: 'yyyy-MM-dd',
        min: '2000-01-01'
      });
      $.get("/enum/get_static_type", function(result) {
        let select = $("select[name='type']");
        $.each(result.data, function(index, item) {
          select.append("<option value='" + item.code + "'>" + item.value + "</option>");
          console.log(item);
        });
        form.render("select");
      });
    })
  }
</script>
</body>
</html>